<template>
  <div class="foodhot-wrapper">
     <div class="serach-wrapper">
      <Input v-model="food_name" placeholder="请输入城市名称" style="width: 300px"></Input>
      <Button @click="getList">开始抓取</Button>
      <Button>暂停</Button>
    </div>
    <div class="data-wrapper">
      <Table border :loading="loading" :columns="columns5" :data="list"></Table>
       <Spin fix v-if="false">
          <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
          <div>Loading</div>
      </Spin>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      food_name: '',
      loading:false,
      columns5: [
        {
            title: '商圈名称',
            key: 'business_name',
            sortable: true
        },
        {
            title: '上月人均消费',
            key: 'last_month_avg_price',
            sortable: true
        },
        {
            title: '本月人均消费',
            key: 'this_month_avg_price',
            sortable: true
        },
        {
            title: '人均消费涨幅',
            key: 'growth_rate',
            sortable: true
        },
        {
            title: '相关店铺',
            key: 'shop_count',
            sortable: true
        },
      ],
      list:[],
      total_records:0,
    }
  },
  methods:{
    getList(){
      if (this.food_name === ''){
        this.$Message.warning('请输入城市名称?');
        return;
      }
      let that = this
      that.loading = true;
      console.log('startGet')
      let url = this.food_name == ''? `http://127.0.0.1:7001/analysis/businessanalysis`:`http://127.0.0.1:7001/analysis/businessanalysis?city_name=${this.food_name}`;
      // let url = `http://127.0.0.1:7001/analysis/hotfoodcategories`
      axios.get(url)
      .then(function (response) {
        that.list = response.data.data;
        that.total_records = that.list.length;
        that.loading = false;
        console.log(that.list)
      })
      .catch(function (error) {
        console.log(error);
      }); 
    }
  }
}
</script>

<style>
  .foodhot-wrapper{
    padding: 20px; 
  }
  .serach-wrapper{
    padding-bottom: 20px;
  }
  .data-wrapper{
    padding-top: 20px;
  }
</style>
